<style>
<!--
	.booking-wizard a span {
		color:#FFF;
	 	background:#aaa; 
	 	display:block; 
	 	height:30px; 
	 	margin:0 auto 10px; 
	 	padding-top:5px; 
	 	width:30px;
	 	border-radius:50% !important;
	}
	
	.booking-wizard a.active span {
		background:#ff8261;
	}
 
	.booking-wizard a {
		color:#333;
		display:inline-block; 
		font-size:12px; 
		text-align:center; 
		text-decoration:none;
		width: 20%;
	}

-->
</style>

<div class="about">
	<div class="container">
		<h1>{{booking.line.lineName}}</h1>
		<div style="margin-top: 50px;color: #fff;">
			<span>单程票价：{{booking.line.price | currency : '￥'}}</span>
			<span style="margin-left: 20px;">里程：{{booking.line.mileage||'-'}} km</span>
		</div>
	</div>
</div>
<div class="about_grid">
	<div class="container">
		<div class="row row-offcanvas row-offcanvas-right">
			<div class="col-md-12">
				<h4 class="tz-title-4 tzcolor-blue">
					<p class="tzweight_Bold">
						<span class="m_1">预订<br></span>
						{{booking.line.lineName}}
						<span style="font-size: 12px;color: red;margin-left: 20px;">单程票价：{{booking.line.price | currency : '￥'}}</span>
						<span style="font-size: 12px;color: red;margin-left: 20px;text-transform: none;">里程：{{booking.line.mileage||'-'}} Km</span>
					</p>
				</h4>
				<div id="lineMap"  class="col-md-12" style="height:300px;background: lightgray;" >线路加载中...</div>
				<div class="col-md-12 text-center" style="padding: 10px 0px;border-bottom: 1px solid #ddd;margin: 5px 0px;">
		            <div class="text-center booking-wizard" >
		                <!-- <a ui-sref-active="active" ui-sref=".plan">
		                	<span>1</span>
		                	乘车时间
    					</a>
    					<a ui-sref-active="active" ui-sref=".date">
		                	<span>2</span>
		                	乘车日期
    					</a>
    					<a ui-sref-active="active" ui-sref=".passenger">
		                	<span>3</span>
		                	选择乘客
    					</a>
    					<a ui-sref-active="active" ui-sref=".confirm">
		                	<span>4</span>
		                	订单确认
    					</a> -->
    					
    					<a href="javascript:void(0)" ng-class="$state.current.name == 'booking.plan' ? 'active' : ''">
		                	<span>1</span>
		                	乘车时间
    					</a>
    					<a href="javascript:void(0)" ng-class="$state.current.name == 'booking.date' ? 'active' : ''">
		                	<span>2</span>
		                	乘车日期
    					</a>
    					<a href="javascript:void(0)" ng-class="$state.current.name == 'booking.passenger' ? 'active' : ''">
		                	<span>3</span>
		                	选择乘客
    					</a>
    					<a href="javascript:void(0)" ng-class="$state.current.name == 'booking.confirm' ? 'active' : ''"">
		                	<span>4</span>
		                	订单确认
    					</a>
		            </div>
		            
		        </div>
		        
			</div>
		</div>
	</div>
	<div class="form-view" ui-view style="min-height: 500px;"></div>
	<hr>
	<div>
		            <!-- <p>{{ booking }}</p> -->
		            </div>
</div>
